<!-- <!DOCTYPE html>
<html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>天地图－地图API－范例－地图类型控件</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
        </style>
        <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=4c4a715cffbe3c32c0c9632fafde6590"></script>
    </head>
    <body>
        <div id="map" style="width:600px; height:600px;overflow: hidden;"></div>
        <script>
            //初始化地图对象
            map = new T.Map("map", {datasourcesControl: true});
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), 12);
            //创建对象
            var ctrl = new T.Control.MapType();
            //添加控件
            map.addControl(ctrl);
        </script>
    </body>
</html> -->

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>百度地图选点--Bootstrap模态框(Modal)插件</title>
   <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2d12993ce41407db4050140fe342d9ba"></script>  
</head>
<body>
 
<h2>百度地图选点--创建模态框(Modal)</h2>
<!--按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="createMap">设置项目所在位置</button>
<input type="text" value="" id="map" class="form-control">
 
<!--模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
            <h4 class="modal-title" id="myModalLabel">百度地图选点(鼠标滚动缩放地图,鼠标拖动移动地图)</h4>
        </div>
        <div class="modal-body" id="map_main" style="height:400px;">在这里添加一些文本</div>
        <div class="modal-footer">
            <input style="width:300px;float:left;" type="text" value="" id="map_txt" class="form-control" readonly=""/>
            <button type="button" class="btn btn-primary" onclick="setMapValue()">设置为此地址</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
    </div>
    </div>
</div>
 
<script type="text/javascript">
    $(function(){
        $("#createMap").click(function(){
            setTimeout(function() {     //添加延时加载。解决问题
                var map = new BMap.Map("map_main");
                var myCity = new BMap.LocalCity();
                myCity.get(function(res){
                    map.centerAndZoom(res.center,res.level); 
                    var old_map = $('#map').val();      //如果已设置过
                    if(old_map.length > '5'){            //打开的时候显示已设置的
                        $("#map_txt").val(old_map);     
                        var oldMap = old_map.split(",");
                        var point = new BMap.Point(oldMap[0],oldMap[1]);    
                        var marker = new BMap.Marker(point);        // 创建标注    
                        map.clearOverlays();
                        map.addOverlay(marker);
                    }
                    map.addEventListener("click", function(e){
                        var lng_lat = e.point.lng+','+e.point.lat;
                        $("#map_txt").val(lng_lat);                 //加入到设置框
                        var point = new BMap.Point(e.point.lng,e.point.lat);    
                        var marker = new BMap.Marker(point);        // 创建标注    
                        map.clearOverlays();
                        map.addOverlay(marker);
                    });
                });
            },300);
        });
    });
 
    //设置经纬度
    function setMapValue(){
        if($("#map_txt").val()==""){ alert('你还没选择相应的坐标点^_^哦'); return false; }
        $("#map").val($("#map_txt").val());
        $('#myModal').modal('hide')
    }
 
</script>
</body>
</html>